<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章细节</title>
  <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="/css/common.css">
  <style>
    body{
      overflow-y: scroll;
    }
    #app{
      position: relative;
      padding: 10%;
      background: white;
      padding-bottom: 90px;
    }
    .title{
      width: 100%;
      font-size: 2.5em;
      text-align: center;
      margin-bottom: 10px;
    }
    .author{
      color: #8c939d;
      text-align: left;
    }
    img{
      display: block;
      width: 80%;
      margin: 20px auto;
    }
    p{
      margin: 10px;
      text-indent: 2em;
      line-height: 2em;
    }
  </style>
</head>
<body>
<div id="app">
<!--返回图标-->
  <img src="/image/fenxiDetailjiantou.png" style="width: 50px;height: 50px;position: absolute;top: 10px;left: 10px"
       @click="back">
  <div class="title">{{article.title}}</div>
  <div class="author">{{article.author}}&nbsp;&nbsp;{{article.createTime}}</div>
  <img :src="article.icon"/>
  <div class="context">
    <p v-for="item in article.context">{{item}}</p>
  </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el : "#app",
    mounted(){
      //获取文章数据
      const id = localStorage.getItem('currentArticle');
      axios({
        method : 'get',
        url : '/article/'+id
      }).then((resp)=>{
        this.article.title = resp.data.data.title
        this.article.author = resp.data.data.author
        this.article.createTime = resp.data.data.createTime
        this.article.icon = resp.data.data.icon
        const c = resp.data.data.context
        this.article.context = c.split('\n')
      })
    },
    methods : {
      back(){
        window.history.back();
      },
    },
    data(){
      return {
        article:{
          title : null,
          author : null,
          context : [],
          createTime : null,
          icon : null,
        }
      }
    }
  })
</script>
</html>